<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='ttblsjxt'/></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }
    </style>
</head>

<body>
<div class="layui-container">
    <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

        <form:form commandName="goods" method="${_method }" class="layui-form" id="form">
            <input type="hidden" name="_method" value="${_method }"/>
            <form:hidden path="id"/>

            <div style="background: #fff3e0;border: 1px solid #ff9966;padding: 15px 2.5%;border-radius: 5px;" class="layui-show">
                <p><fmt:message key='wxts'/></p>
                <br/>
                <p><fmt:message key='1'/> <b style="color:red">*</b> <fmt:message key='1-1'/></p>
                <p><fmt:message key='2'/></p>
                <p><fmt:message key='3'/></p>
                <p><fmt:message key='4'/></p>
                <p><fmt:message key='5'/></p>
                <p><fmt:message key='6'/></p>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend><fmt:message key='jbxx'/></legend>
            </fieldset>

            <div class="layui-form-item goodsChannelArea">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='splm'/></label>

                <c:if test="${_method eq 'POST'}">
                    <div class="layui-input-inline" style="width: 130px">
                        <select lay-verify="required" id="topChannel" lay-filter="topChannel">
                            <option value=""><fmt:message key='qxz'/></option>
                            <c:forEach items="${channels }" var="item">
                                <option value="${item.id}">${item.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </c:if>

                <c:if test="${_method eq 'PUT'}">

                    <div class="layui-input-inline" style="width: 130px">
                        <select lay-verify="required" id="topChannel" lay-filter="topChannel">
                            <option value=""><fmt:message key='qxz'/></option>
                            <c:forEach items="${channels }" var="item">
                                <option value="${item.id}"
                                        <c:if test="${item.id eq goods.goodsChannel.parent.parent.id}">selected="selected"</c:if> >${item.name}</option>
                            </c:forEach>
                        </select>
                    </div>

                    <div class="layui-inline middleChannel">
                        <div class="layui-input-inline" style="width: 130px">
                            <select lay-verify="required" id="middleChannel" lay-filter="middleChannel">
                                <option value=""><fmt:message key='qxz'/></option>
                                <c:forEach items="${goods.goodsChannel.parent.parent.children }" var="item">
                                    <option value="${item.id}"
                                            <c:if test="${item.id eq goods.goodsChannel.parent.id}">selected="selected"</c:if> >${item.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline bottomChannel">
                        <div class="layui-input-inline" style="width: 130px">
                            <select lay-verify="required" name="goodsChannel.id" id="bottomChannel" lay-filter="bottomChannel">
                                <option value=""><fmt:message key='qxz'/></option>
                                <c:forEach items="${goods.goodsChannel.parent.children }" var="item">
                                    <option value="${item.id}"
                                            <c:if test="${item.id eq goods.goodsChannel.id}">selected="selected"</c:if> >${item.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </c:if>

            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spmc'/></label>
                <div class="layui-input-block">
                    <form:input path="name" class="layui-input" lay-verify="required" placeholder="<fmt:message key='spmc'/>" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spbh'/></label>
                <div class="layui-input-block" style="width:700px;">
                    <form:input path="goodsNo" class="layui-input layui-inline" lay-verify="required" placeholder="<fmt:message key='spbh'/>" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spjg'/></label>
                <div class="layui-input-block">
                    <form:input path="defaultPrice" class="layui-input" lay-verify="required" placeholder="<fmt:message key='spbh'/>" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='scj'/></label>
                <div class="layui-input-block">
                    <form:input path="marketPrice" class="layui-input" lay-verify="required" placeholder="<fmt:message key='spbh'/>" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='kdkgwjs'/></label>
                <div class="layui-input-block">
                    <form:input path="deductionGoldBeans" lay-verify="required" class="layui-input" placeholder="<fmt:message key='kdkdkjgwjs'/>" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='yfjsfs'/></label>
                <div class="layui-inline">
                    <input type="radio" name="postageType" lay-filter="postageType" lay-verify="required" value="1" title="<fmt:message key='yfmb'/>" <c:if test="${goods.postageType eq 1}">checked="checked"</c:if>/>
                    <input type="radio" name="postageType" lay-filter="postageType" lay-verify="required" value="2" title="<fmt:message key='by'/>" <c:if test="${goods.postageType eq 2}">checked="checked"</c:if>/>
                    <input type="radio" name="postageType" lay-filter="postageType" lay-verify="required" value="3" title="<fmt:message key='zdyf'/>" <c:if test="${goods.postageType eq 3}">checked="checked"</c:if>/>
                </div>
            </div>

            <div id="postageArea" style="display:none">
                <div class="layui-form-item" >
                    <label class="layui-form-label"><fmt:message key='zdyf'/></label>
                    <div class="layui-input-inline">
                        <form:input path="postage" lay-verify="required" class="layui-input" placeholder="<fmt:message key='zdyf'/>" style="width: 200px;"/>
                    </div>
                </div>
            </div>


            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend><fmt:message key='spgg'/></legend>
            </fieldset>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='gg'/></label>
                <div class="layui-input-inline">
                    <form:hidden path="saleAttributeData"/>
                    <form:hidden path="skusData"/>

                    <c:if test="${_method eq 'POST'}">

                        <select class="layui-input feijin-attribute-select" id="attribute" lay-filter="attribute">
                            <option value=""><fmt:message key='qxz'/></option>
                            <c:forEach items="${attributes}" var="item">
                                <option value="${item.id}">${item.name}</option>
                            </c:forEach>
                        </select>
                        <div id="attributeArea" style="width:600px;" class="layui-input-inline"></div>
                    </c:if>

                    <c:if test="${_method eq 'PUT'}">
                        <select class="layui-input feijin-attribute-select" id="attribute" lay-filter="attribute">
                            <option value=""><fmt:message key='qxz'/></option>
                            <c:forEach items="${attributes}" var="item">
                                <option value="${item.id}"
                                        <c:if test="${item.id eq goods.saleAttributes[0].attributeId}">selected="selected"</c:if>  >${item.name}</option>
                            </c:forEach>
                        </select>
                        <div id="attributeArea" style="width:600px;" class="layui-input-inline">

                            <c:forEach items="${attributes}" var="item">
                                <c:if test="${item.id eq goods.saleAttributes[0].attributeId}">

                                    <c:forEach items="${item.attributes}" var="attribute">

                                        <c:set var="isCheck" value="false"/>
                                        <c:forEach items="${goods.saleAttributes[0].values}" var="checkItem">
                                            <c:if test="${attribute.id eq checkItem.attributeId}">
                                                <c:set var="isCheck" value="true"/>
                                            </c:if>
                                        </c:forEach>

                                        <c:choose>
                                            <c:when test="${isCheck eq 'true'}">
                                                <input type='checkbox' checked="checked" class='attribute1-feijin-attribute-checkbox' lay-filter='feijin-attribute-checkbox' value='${attribute.id}' title='${attribute.name}'/>
                                            </c:when>
                                            <c:otherwise>
                                                <input type='checkbox' class='attribute1-feijin-attribute-checkbox' lay-filter='feijin-attribute-checkbox' value='${attribute.id}' title='${attribute.name}'/>
                                            </c:otherwise>
                                        </c:choose>
                                    </c:forEach>
                                </c:if>
                            </c:forEach>


                        </div>
                    </c:if>
                </div>
                <div class="layui-form-mid layui-word-aux" id="feijin-add-attribute-area">
                    <a href='javascript:void(0);' id='feijin-addAttribute' style='color:blue;<c:if test="${fn:length(goods.saleAttributes) == 2}">display:none;</c:if>'><fmt:message key='tjgg'/></a>
                </div>
            </div>

            <div id="attributeDiv2">

                <c:if test="${_method eq 'PUT' && fn:length(goods.saleAttributes) == 2}">

                <div class='layui-form-item'><label class='layui-form-label'><b style='color:red'>*</b> <fmt:message key='gg'/></label>
                    <div class='layui-input-inline'>

                        <select class="layui-input feijin-attribute-select" id="attribute2" lay-filter="attribute2">
                            <option value=""><fmt:message key='qxz'/></option>
                            <c:forEach items="${attributes}" var="item">
                                <option value="${item.id}"
                                        <c:if test="${item.id eq goods.saleAttributes[1].attributeId}">selected="selected"</c:if>  >${item.name}</option>
                            </c:forEach>
                        </select>

                        <div id="attributeArea2" style="width:600px;" class="layui-input-inline">

                            <c:forEach items="${attributes}" var="item">
                                <c:if test="${item.id eq goods.saleAttributes[1].attributeId}">

                                    <c:forEach items="${item.attributes}" var="attribute">

                                        <c:set var="isCheck" value="false"/>
                                        <c:forEach items="${goods.saleAttributes[1].values}" var="checkItem">
                                            <c:if test="${attribute.id eq checkItem.attributeId}">
                                                <c:set var="isCheck" value="true"/>
                                            </c:if>
                                        </c:forEach>

                                        <c:choose>
                                            <c:when test="${isCheck eq 'true'}">
                                                <input type='checkbox' checked="checked" class='attribute2-feijin-attribute-checkbox' lay-filter='feijin-attribute-checkbox' value='${attribute.id}' title='${attribute.name}'/>
                                            </c:when>
                                            <c:otherwise>
                                                <input type='checkbox' class='attribute2-feijin-attribute-checkbox' lay-filter='feijin-attribute-checkbox' value='${attribute.id}' title='${attribute.name}'/>
                                            </c:otherwise>
                                        </c:choose>
                                    </c:forEach>
                                </c:if>
                            </c:forEach>

                        </div>

                    </div>
                    <div class='layui-form-mid layui-word-aux'><a href='javascript:void(0);' id='feijin-remove-attribute' style='color:red;'><fmt:message key='sc'/></a></div>
                    </c:if>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spsku'/></label>
                <div class="layui-input-block">
                    <table class="layui-table" lay-size="sm" id="feijin-sku-table">
                        <thead>
                        <th>
                            <c:forEach items="${attributes}" var="item">
                                <c:if test="${item.id eq goods.saleAttributes[0].attributeId}">${item.name}</c:if>
                            </c:forEach>
                        </th>
                        <c:if test="${fn:length(goods.saleAttributes) == 2}">
                            <th>
                                <c:forEach items="${attributes}" var="item">
                                    <c:if test="${item.id eq goods.saleAttributes[1].attributeId}">${item.name}</c:if>
                                </c:forEach>
                            </th>
                        </c:if>
                        <th><fmt:message key='sjbh'/></th>
                        <th><fmt:message key='kcs'/></th>
                        <th><fmt:message key='xsj'/></th>
                        </thead>
                        <tbody>
                        <c:if test="${fn:length(goods.saleAttributes) == 1}">
                            <c:forEach items="${goods.skus}" var="sku">
                                <tr>
                                    <td>${sku.attribute1.name}</td>
                                    <td><input type="text" class="layui-input feijin-skuCode" data-id="${sku.attribute1.id}" data-index="${sku.attribute1.id}" value="${sku.code}" /></td>
                                    <td><input type="text" class="layui-input" id="feijin-skuStore-${sku.attribute1.id}" value="${sku.store}" /></td>
                                    <td><input type="text" class="layui-input" id="feijin-skuPrice-${sku.attribute1.id}" value="${sku.price}" /></td>
                                </tr>
                            </c:forEach>
                        </c:if>

                        <c:if test="${fn:length(goods.saleAttributes) == 2}">
                            <c:forEach items="${goods.skus}" var="sku" varStatus="index">

                                <tr>
                                    <td>${sku.attribute1.name}</td>
                                    <td>${sku.attribute2.name}</td>
                                    <td><input type="text" class="layui-input feijin-skuCode" data-id="${sku.attribute1.id}-${sku.attribute2.id}" data-index="${sku.attribute1.id}-${sku.attribute2.id}" value="${sku.code}" /></td>
                                    <td><input type="text" class="layui-input" id="feijin-skuStore-${sku.attribute1.id}-${sku.attribute2.id}" value="${sku.store}" /></td>
                                    <td><input type="text" class="layui-input" id="feijin-skuPrice-${sku.attribute1.id}-${sku.attribute2.id}" value="${sku.price}" /></td>
                                </tr>
                            </c:forEach>
                        </c:if>
                        </tbody>
                    </table>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend><fmt:message key='spxc'/></legend>
            </fieldset>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spfm'/></label>
                <div class="layui-inline">
                    <form:hidden path="defaultImage" id="defaultImage" class="layui-input"/>
                    <a href='javascript:void(0);' id="choose-defaultImage" value="<fmt:message key='sc'/>" style='color:blue;line-height: 38px;'><fmt:message key='scspfm'/></a>
                        <%--&nbsp;&nbsp;&nbsp; 建议上传 200 * 200px 的图片，图片大小控制在100kb内，图片格式支持jpeg/jpg/png--%>
                    <div id="feijinImage-defaultImage">
                        <c:if test="${not empty goods.defaultImage}">
                            <img src="${store_domain}/uploads/${goods.defaultImage}" style="width:120px;height:120px;margin-top:10px;">
                        </c:if>
                        <c:if test="${empty goods.defaultImage}">
                            <img src="${web_domain}/resources/images/default.jpeg" style="width:120px;height:120px;margin-top:10px;">
                        </c:if>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spxc'/></label>
                <div class="layui-input-block">

                    <form:hidden path="imagesData" id="feijin-imagesData" class="layui-input" />

                    <a href='javascript:void(0);' id="choose-goodsImages" value="<fmt:message key='sc'/>" style='color:blue;line-height: 38px;'><fmt:message key='scspxc'/></a>
                        <%--&nbsp;&nbsp;&nbsp; 建议上传 200 * 200px 的图片，图片大小控制在100kb内，图片格式支持jpeg/jpg/png--%>
                    <div id="feijinImageArea">
                        <c:choose>
                            <c:when test="${empty goods.images}">
                                <img id="goodsImages-defaultImage" src="${web_domain}/resources/images/default.jpeg" style="width:120px;height:120px;margin-top:10px;">
                            </c:when>
                            <c:otherwise>
                                <c:forEach items="${goods.images}" var="goodsImage">
                                    <li id='li${goodsImage.id}' style='display: inline-block; text-align: center; margin: 10px 15px;'> <img style='width:100px;height:100px; display: block; margin-bottom: 5px;' class='feijin-images' data-src='${goodsImage.name}' src='${store_domain}/uploads/${goodsImage.name}' /> <i class='i-close feijin-remove' data='${goodsImage.id}'><i class='layui-icon layui-btn layui-btn-danger layui-btn-xs'>&#xe640;</i></i></li>
                                </c:forEach>
                            </c:otherwise>
                        </c:choose>
                    </div>

                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spzzcl'/></label>
                <div class="layui-inline">
                    <form:hidden path="qualificationImage" id="qualificationImage" class="layui-input"/>
                    <a href='javascript:void(0);' id="choose-qualificationImage" value="<fmt:message key='sc'/>" style='color:blue;line-height: 38px;'><fmt:message key='sczzcltp'/></a>
                    <div id="feijinImage-qualificationImage">
                        <c:if test="${not empty goods.qualificationImage}">
                            <img src="${store_domain}/uploads/${goods.qualificationImage}" style="width:120px;height:120px;margin-top:10px;">
                        </c:if>
                        <c:if test="${empty goods.qualificationImage}">
                            <img src="${web_domain}/resources/images/default.jpeg" style="width:120px;height:120px;margin-top:10px;">
                        </c:if>
                    </div>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend><fmt:message key='spnr'/></legend>
            </fieldset>

            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='spcs'/></label>
                <div class="layui-inline">
                    <form:hidden path="paramsData"/>
                    <a href='javascript:void(0);' id='feijin-addParams' style='color:blue;line-height: 38px;'><fmt:message key='tjspcs'/></a>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-inline" id="feijin-goods-params-area" style="width:500px;">

                    <c:if test="${_method eq 'PUT'}">
                        <c:forEach items="${goods.paramses}" var="item" varStatus="index">
                            <div id="feijin-params-item-${index.index}">
                                <input type="text" class="layui-inline layui-input feijin-params-key" value="${item.paramsName}" placeholder="<fmt:message key='qsrcsmc'/>" data-index="${index.index}" style="width:200px;display:inline-block"/><b>:&nbsp;&nbsp;</b>
                                <input type='text' class='layui-inline layui-input' value="${item.paramsValue}" id='feijin-params-value-${index.index}' placeholder='<fmt:message key='qsrcsz'/>' style='width:200px;display: inline-block;'/>
                                <a href='javascript:void(0);' class='feijin-params-remove' data-index='${index.index}' style='margin-left: 10px;color:red;'><fmt:message key='sc'/></a>
                            </div>
                        </c:forEach>
                    </c:if>

                </div>
            </div>

            <div class="layui-form-item">
                <label for="" class="layui-form-label"><span style="color: red;">*</span> <fmt:message key='spms'/></label>
                <div class="layui-input-inline" style="width: 70%">
                    <div id="feijin-content" style="height:400px; width: 100%;"></div>
                    <form:hidden path="content"/>
                </div>
            </div>


            <div class="layui-input-block">
                <div style="display: none"><input type="button" value="<fmt:message key='bc'/>" class="layui-btn" id="submit" lay-filter="submit" lay-submit></div>
            </div>

        </form:form>
    </div>
</div>

<div style="display:none;">

    <form action="${web_domain}/upload/image" method="post" id="upload-defaultImage" enctype="multipart/form-data">
        <input id="defaultImage-file" name="file" type="file"/>
    </form>

    <form action="${web_domain}/upload/image" method="post" id="upload-qualificationImage" enctype="multipart/form-data">
        <input id="qualificationImage-file" name="file" type="file"/>
    </form>

    <!-- 多图上传开始 -->
    <script>
        window.EASY_UPLOAD_HOME_URL = "${web_domain}/uploads/";
    </script>
    <script type="text/javascript" src="${web_domain}/uploads/ueditor.config.js"></script>
    <script type="text/javascript" src="${web_domain}/uploads/ueditor.all.js"></script>
    <script type="text/plain" id="uploadsPlugin"></script>
    <input type="hidden" id="currentUploadValue"/>
    <!-- 多图上传结束 -->

</div>


<script type="text/javascript" src="${web_domain}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="${web_domain}/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="${web_domain}/ueditor/lang/zh-cn/zh-cn.js"></script>
<script>

    //多图上传成功后的回调
    function uploadSuccessCallback(url, original) {

        $("#goodsImages-defaultImage").remove();
        var id = Math.random();
        var html = " <li id='li" + id + "' style='display: inline-block; text-align: center; margin: 10px 15px;'> <img style='width:100px;height:100px; display: block; margin-bottom: 5px;' class='feijin-images' data-src='" + original + "' src='" + url + "' /> <i class='i-close feijin-remove' data='" + id + "'><i class='layui-icon layui-btn layui-btn-danger layui-btn-xs'>&#xe640;</i></i></li>";
        $("#feijinImageArea").html($("#feijinImageArea").html() + html);

    }


    $(function () {

        var id = $("input[name='postageType']:checked").val();
        if (id == 3) {
            $("#postageArea").show();
        }

        //删除上传的图片
        $(document).on('click', '.feijin-remove', function () {
            $(this).parent().remove();
        });


        //多图上传插件
        EASY_UP.getEditor('uploadsPlugin').addListener("ready", function () {

//            var id = $('.edui-for-insertimage').attr('id'); //加载完成后，通过此代码可以获取当前多图上传插件的动态id,edui-for-insertimage 是多图上传插件的class name
            var multisUploadsPlugin = $EDITORUI['edui8'];

            //多图上传-门店门面图片上传
            $("#choose-goodsImages").click(function () {
                $("#currentUploadValue").attr("value", "goodsImages");
                multisUploadsPlugin._onClick(event, this);
            });

        });


        UE.getEditor('feijin-content');
        var contentEdit = UE.getEditor('feijin-content');

        contentEdit.addListener("ready", function () {
            UE.getEditor('feijin-content').setContent($("#content").val());
        });


        //商品封面图片上传
        $("#choose-defaultImage").click(function () {
            $("#defaultImage-file").click();
        });
        $("#defaultImage-file").change(function () {
            $("#upload-defaultImage").ajaxSubmit({
                type: "post",
                dataType: "JSON",
                success: function (result) {
                    if (result.status) {
                        $("#defaultImage").attr("value", result.path);
                        $("#feijinImage-defaultImage").html("<img src='${store_domain}/uploads/" + result.path + "' style='width:120px;height:120px;margin-top:10px;' />'");
                    }
                },
                error: function (result) {
                    console.log(result.responseText);
                }
            });
        });

        //商品资质证明图片上传
        $("#choose-qualificationImage").click(function () {
            $("#qualificationImage-file").click();
        });
        $("#qualificationImage-file").change(function () {
            $("#upload-qualificationImage").ajaxSubmit({
                type: "post",
                dataType: "JSON",
                success: function (result) {
                    if (result.status) {
                        $("#qualificationImage").attr("value", result.path);
                        $("#feijinImage-qualificationImage").html("<img src='${store_domain}/uploads/" + result.path + "' style='width:120px;height:120px;margin-top:10px;' />'");
                    }
                },
                error: function (result) {
                    console.log(result.responseText);
                }
            });
        });

        //添加商品参数
        $("#feijin-addParams").click(function () {
            var id = Math.floor(Math.random() * 10000);
            var html = "<div id='feijin-params-item-" + id + "'>";
            html += "<input type='text' class='layui-inline layui-input feijin-params-key' placeholder='<fmt:message key='qsrcsmc'/>' data-index='" + id + "' style='width:200px;display: inline-block;'/><b>:&nbsp;&nbsp;</b>";
            html += "<input type='text' class='layui-inline layui-input' id='feijin-params-value-" + id + "' placeholder='<fmt:message key='qsrcsz'/>' style='width:200px;display: inline-block;'/>";
            html += "<a href='javascript:void(0);' class='feijin-params-remove' data-index='" + id + "' style='margin-left: 10px;color:red;'><fmt:message key='sc'/></a>";
            html += "</div>";

            $("#feijin-goods-params-area").append(html);
        });

        //删除商品参数
        $(document).on("click", ".feijin-params-remove", function () {
            var id = $(this).attr("data-index");
            $("#feijin-params-item-" + id).remove();
        });

        layui.use(['form', 'laydate'], function () {

            var form = layui.form;
            var laydate = layui.laydate;

            //生成sku
            function buildSKU() {

                var html = "<thead>";
                $(".feijin-attribute-select").each(function (index, item) {
                    if ($(item).find("option:selected").text() != "<fmt:message key='qxz'/>") {
                        html += "<th id='th-" + item.id + "'>" + $(item).find("option:selected").text() + "</th>";
                    }
                });
                html += "<th><fmt:message key='sjbh'/></th><th><b style='color:red'>*</b> <fmt:message key='kcs'/></th><th><b style='color:red'>*</b> <fmt:message key='xsj'/></th></thead><tbody>";

                $(".attribute1-feijin-attribute-checkbox").each(function (checkboxindex, checkboxitem) {
                    if (checkboxitem.checked) {

                        if (!$(".attribute2-feijin-attribute-checkbox") || $(".attribute2-feijin-attribute-checkbox:checked").length == 0) {
                            //只有规格一
                            html += "<tr><td>" + $(checkboxitem).attr("title") + "</td><td><input type='text' data-id='" + $(checkboxitem).val() + "' data-index='" + checkboxindex + "' class='layui-input feijin-skuCode'/></td><td><input type='text' class='layui-input' id='feijin-skuStore-" + checkboxindex + "'/></td><td><input type='text' class='layui-input' id='feijin-skuPrice-" + checkboxindex + "'/></td>";

                        } else {
                            //规格一与规格二并存
                            var index = 0;
                            $(".attribute2-feijin-attribute-checkbox").each(function (checkboxindex2, checkboxitem2) {
                                if (checkboxitem2.checked) {

                                    html += "<tr>";
                                    if (index == 0) {
                                        html += "<td rowspan='" + $(".attribute2-feijin-attribute-checkbox:checked").length + "'>" + $(checkboxitem).attr("title") + "</td>";
                                    }
                                    html += "<td>" + $(checkboxitem2).attr("title") + "</td>";
                                    html += "<td><input type='text' data-id='" + $(checkboxitem).val() + "-" + $(checkboxitem2).val() + "' data-index='" + $(checkboxitem).val() + "-" + $(checkboxitem2).val() + "' class='layui-input feijin-skuCode'/></td><td><input type='text' class='layui-input' id='feijin-skuStore-" + $(checkboxitem).val() + "-" + $(checkboxitem2).val() + "'/></td><td><input type='text' class='layui-input' id='feijin-skuPrice-" + $(checkboxitem).val() + "-" + $(checkboxitem2).val() + "'/></td>";
                                    html += "</tr>";
                                    index++;
                                }
                            });
                        }


                    }
                });


                html += "</tbody>";

                $("#feijin-sku-table").html(html);


            }

            //勾选具体的商品规格
            form.on('checkbox(feijin-attribute-checkbox)', function (data) {
                buildSKU();
            });

            //添加第二个商品规格
            $("#feijin-addAttribute").click(function () {
                $.ajax({
                    url: "${web_domain}/merchant/goods/goodsAttributes",
                    type: "get",
                    dataType: "json",
                    success: function (result) {
                        if (result.status && result.result != null) {
                            var channelsHTML = "<div class='layui-form-item'><label class='layui-form-label'><b style='color:red'>*</b> 规格</label><div class='layui-input-inline'><select class='layui-input feijin-attribute-select' id='attribute2' lay-filter='attribute2' ><option value='' ><fmt:message key='qxz'/></option>";
                            $.each(result.result, function (index, item) {
                                channelsHTML += "<option value='" + item.id + "' >" + item.name + "</option>"
                            });
                            channelsHTML += "</select><div id='attributeArea2' style='width:600px;' class='layui-input-inline'></div></div><div class='layui-form-mid layui-word-aux'><a href='javascript:void(0);' id='feijin-remove-attribute' style='color:red;'><fmt:message key='sc'/></a></div></div>";
                            $("#attributeDiv2").html(channelsHTML);
                            $("#feijin-add-attribute-area").attr("style", "display:none;");
                            form.render('select');//重新渲染
                            buildSKU();
                        }
                    }
                });
            });

            $(document).on('click', '#feijin-remove-attribute', function () {
                $("#attributeDiv2").html("");
                form.render("select");
                $("#feijin-add-attribute-area").attr("style", "display:block;");
                buildSKU();

            });

            //选择商品规格一
            form.on('select(attribute)', function (data) {
                if (data.elem != data.value) {
                    var id = $("#attribute").val();
                    if (id) {
                        $.ajax({
                            url: "${web_domain}/merchant/goods/attributes?id=" + id,
                            type: "get",
                            dataType: "JSON",
                            success: function (result) {
                                if (result.status && result.result != null) {
                                    var channelsHTML = "";
                                    $.each(result.result, function (index, item) {
                                        channelsHTML += "<input type='checkbox' class='attribute1-feijin-attribute-checkbox' lay-filter='feijin-attribute-checkbox' value='" + item.id + "' title='" + item.name + "' />"
                                    });
                                    channelsHTML += "";
                                    $("#attributeArea").html(channelsHTML);
                                    form.render('checkbox');//重新渲染
                                    buildSKU();

                                }
                            }
                        });
                    } else {
                        $("#attributeArea").html("");
                        buildSKU();
                    }


                }
            });

            //选择商品规格二的值
            form.on('select(attribute2)', function (data) {
                if (data.elem != data.value) {
                    var id = $("#attribute2").val();

                    $.ajax({
                        url: "${web_domain}/merchant/goods/attributes?id=" + id,
                        type: "get",
                        dataType: "JSON",
                        success: function (result) {
                            if (result.status && result.result != null) {
                                var channelsHTML = "";
                                $.each(result.result, function (index, item) {
                                    channelsHTML += "<input type='checkbox' class='attribute2-feijin-attribute-checkbox' lay-filter='feijin-attribute-checkbox' value='" + item.id + "' title='" + item.name + "' />"
                                });
                                channelsHTML += "";
                                $("#attributeArea2").html(channelsHTML);
                                form.render('checkbox');//重新渲染
                            }
                        }
                    });
                }
            });

            //加载二级商品类目
            form.on('select(topChannel)', function (data) {
                if (data.elem != data.value) {
                    var id = $("#topChannel").val();
                    $(".middleChannel").remove();
                    $(".bottomChannel").remove();

                    $.ajax({
                        url: "${web_domain}/merchant/goods/childChannels?id=" + id,
                        type: "get",
                        dataType: "JSON",
                        success: function (result) {
                            if (result.status && result.result != null) {
                                var channelsHTML = "<div class='layui-inline middleChannel'>" +
                                        "<div class='layui-input-inline' style='width: 130px' >" +
                                        "<select lay-verify='required' id='middleChannel' class='layui-input' lay-filter='middleChannel'>" +
                                        "<option value=''><fmt:message key='qxz'/></option>";
                                $.each(result.result, function (index, item) {
                                    channelsHTML += "<option value='" + item.id + "' >" + item.name + "</option>"
                                });
                                channelsHTML += "</select></div></div>";
                                $(".goodsChannelArea").append(channelsHTML);
                                form.render('select');//重新渲染
                            }
                        }
                    });
                }
            });

            //加载三级商品类目
            form.on('select(middleChannel)', function (data) {
                if (data.elem != data.value) {
                    var id = $("#middleChannel").val();
                    $(".bottomChannel").remove();

                    $.ajax({
                        url: "${web_domain}/merchant/goods/childChannels?id=" + id,
                        type: "get",
                        dataType: "JSON",
                        success: function (result) {
                            if (result.status && result.result != null) {
                                var channelsHTML = "<div class='layui-inline bottomChannel'>" +
                                        "<div class='layui-input-inline' style='width: 130px' >" +
                                        "<select lay-verify='required' name='goodsChannel.id' id='bottomChannel' class='layui-input' lay-filter='bottomChannel'>" +
                                        "<option value=''><fmt:message key='qxz'/></option>";
                                $.each(result.result, function (index, item) {
                                    channelsHTML += "<option value='" + item.id + "' >" + item.name + "</option>"
                                });
                                channelsHTML += "</select></div></div>";
                                $(".goodsChannelArea").append(channelsHTML);
                                form.render('select');//重新渲染
                            }
                        }
                    });
                }
            });

            //运费方式设置
            form.on('radio(postageType)', function (data) {
                var id = data.value;

                if (id == 1) {

                    $("#postageArea").hide();
                }

                if (id == 2) {
                    $("#postageArea").hide();
                }

                if (id == 3) {
                    $("#postageArea").show();
                }
            });

            form.on('submit(submit)', function (data) {

                var images = [];
                $(".feijin-images").each(function(index, item) {
                    var name = $(item).attr("data-src");
                    images.push(name);
                });

                $("#feijin-imagesData").attr("value", images.join(";"))


                var saleAttributes = [];

                $(".feijin-attribute-select").each(function (index, item) {
                    var id = $(item).val();

                    var i = index + 1;

                    var checkedAttributes = [];
                    $(".attribute" + i + "-feijin-attribute-checkbox:checked").each(function (checkedIndex, checkedItem) {
                        var itemId = $(checkedItem).val();
                        checkedAttributes.push(itemId);
                    });

                    saleAttributes.push(id + ":" + checkedAttributes.join("-"));

                });

                $("#saleAttributeData").attr("value", saleAttributes.join(";"));

                var goodsParams = [];
                $(".feijin-params-key").each(function (index, item) {

                    var id = $(item).attr("data-index");
                    var key = $(item).val();
                    var value = $("#feijin-params-value-" + id).val();

                    var goodsParamsItem = {};
                    goodsParamsItem.paramsName = key;
                    goodsParamsItem.paramsValue = value;
                    goodsParams.push(JSON.stringify(goodsParamsItem));
                });

                $("#paramsData").attr("value", "[" + goodsParams.join(",") + "]");

                var skus = [];

                $(".feijin-skuCode").each(function (index, item) {
                    var id = $(this).attr("data-id");
                    var dataIndex = $(this).attr("data-index");

                    var code = $(this).val();
                    var store = $("#feijin-skuStore-" + dataIndex).val();
                    var price = $("#feijin-skuPrice-" + dataIndex).val();

                    var sku = {};
                    sku.skuNo = id;
                    sku.code = code;
                    sku.store = store;
                    sku.price = price;

                    skus.push(JSON.stringify(sku));
                });

                $("#skusData").attr("value", "[" + skus.join(",") + "]");

                var content = UE.getEditor('feijin-content').getContent();
                $("#content").attr("value", content);

                $("#form").ajaxSubmit({
                    success: function (result) {
                        if (result.status) {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.$("#search").click();
                        } else {
                            layui.use('layer', function () {
                                layer.msg(result.message);
                            });
                        }
                    }
                });
            });

        });

    });
</script>
</body>
</fmt:bundle>
</html>